<!DOCTYPE html>
<html>
	<head>
		<!-- 1.按钮和DIV的单击事件（三种绑定方式）
		
		2. 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式）
		3.登入页面
		用户名输入框，
		密码输入框，
		提交按钮
		
		任务   3.1 用户名框获取焦点事件，控制台输出：用户在输入名称
		         3.2  用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名
		         3.3  密码框获取焦点事件，控制台输出：用户在输入密码
		         3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码
		         3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
		              密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’
		4.实现DIV移动事件，采用监听器方式操作，可实现添加和清除监听器功能。 -->
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div{
				width:300px;
				height:300px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<button type="button" onclick="btnclick();">按钮</button>
		<div id="div" onclick="btnclick()" onmouseenter="enterinto" onmouseleave="leveaDiv()" onmousemove="moveDiv()">
		</div>
		<form  method="post">
		    用户名：<input type="text" name="" id="username" value="" onfocus="a1()" onblur="b1()" /><br />
		    密 码：<input type="password" name="" id="password" onfocus="a2()" onblur="b2()"/><br />
		<button type="button" onclick="tijiao">提交按钮</button>
	</form>
	<div id="div1" style="width: 300px;height: 300px;border: 1px solid red"></div>
	<button type="button" id="btn3" onclick="addListener()">监听事件</button>
			<button type="button" id="btn4" onclick="removeListener()">移除监听事件</button>
	</body>
	<script type="text/javascript">
		function btnclick(){
			alert('被单击了');
		}
		function btnclick(){
			console.log('被单击了');
		}
		function enterinto(){
			console.log('进入div');                                                                 
		}
		function leveaDiv(){
			console.log('离开div');
		}
		function moveDiv(){
			console.log('在div中移动');
		}
		
		function a1(){
			console.log('用户在输入名字');
		}
		function b1(){
			let a = document.getElementById("username")
						if(a.value.length == ' ')
						{
							alert("没有输入用户名");
						}
		}
		function a2(){
			console.log("用户在输入密码");
		}
		function b2(){
			let a=document.getElementById("password")
						if(a.value.length == " "){
							alert("没有输入密码")
						}
		}
		function tijiao(){
			let a=document.getElementById("username")
			let b=document.getElementById("password")
			if (a.value.length == " " && b.value.length == " ") {
				alert("用户名不能为空");
			} if(a.value.length == " "){
				alert("用户名为空")
			}if(b.value.length == " "){
				alert("密码为空")
			}
		}
		function move(){
					console.log("我在DIV上移动监听")
				}
				function addListener(){
					document.getElementById("div1").addEventListener('mousemove',move)
				}
				function removeListener(){
					document.getElementById("div1").removeEventListener('mousemove',move)
				}
	</script>
</html>
